<template>
	<view class="detail-container">
		<view class="content-box">
			<view class="avatar-section">
				<view class="avatar-wrapper">
					<image class="avatar" src="../../static/personHead.png" mode="aspectFill"></image>
					<!-- <view class="camera-icon">
						<image src="/static/images/camera.png" mode="aspectFit"></image>
					</view> -->
				</view>
			</view>

			<view class="form-section">
				<view class="form-item">
					
					<view class="label">姓名</view>
					<view class="input-text readonly">{{ state.userInfo.person_name }}</view>
				</view>

				<view class="form-item">
					
					<view class="label">性别</view>
					<view class="input-text readonly">{{ state.userInfo.sex }}</view>
				</view>

				<view class="form-item arrow">
					<view class="required">*</view>
					<view class="label">出生日期</view>
					<picker mode="date" :value="state.formData.birthday" :start="startDate" :end="endDate"
						@change="onBirthdayChange">
						<view class="input-wrapper">
							<view :class="state.formData.birthday ? 'input-text' : 'placeholder'">
								{{state.formData.birthday || '请选择出生日期'}}
							</view>
							<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>

				<view class="form-item">
					<view class="required">*</view>
					<view class="label">身份证</view>
					<input type="text" v-model="state.formData.identification" placeholder="请输入身份证号码"
						placeholder-class="placeholder" />
				</view>

				<view class="form-item arrow">
					<view class="required">*</view>
					<view class="label">政治面貌</view>
					<view class="input-wrapper" @tap="showPoliticalPicker">
						<view :class="state.formData.politics ? 'input-text' : 'placeholder'">
							{{state.formData.politics || '请选择'}}
						</view>
						<image class="arrow-icon" src="/static/images/arrow-right.png" mode="aspectFit"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="required">*</view>
					<view class="label">手机号码</view>
					<input type="text" v-model="state.formData.phone" placeholder="请输入手机号码"
						placeholder-class="placeholder" />
				</view>
			</view>

			<view class="submit-btn" @click="submitForm">
				确认修改
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted
	} from 'vue'
	import CustomTabbar from "@/components/custom-tabbar/custom-tabbar.vue";

	import {
		request
	} from "../../js/util.js";
	// 统一状态管理
	const state = reactive({
		// 用户基本信息（不可修改部分）
		userInfo: {
			person_name: '', // 姓名
			sex: '', // 性别
		},
		// 表单信息（可修改部分）
		formData: {
			birthday: '',
			identification: '', // 身份证
			politics: '', // 政治面貌
			phone: '', // 手机号码
		}
	})

	// 日期范围
	const startDate = '1900-01-01'
	const endDate = new Date().toISOString().split('T')[0]

	// 生日选择回调
	const onBirthdayChange = (e) => {
		state.formData.birthday = e.detail.value
	}

	// 政治面貌选项
	const politicsOptions = ['群众', '共青团员', '中共党员', '民主党派']

	// 显示政治面貌选择器
	const showPoliticalPicker = () => {
		uni.showActionSheet({
			itemList: politicsOptions,
			success: (res) => {
				state.formData.politics = politicsOptions[res.tapIndex]
			}
		})
	}

	// 获取用户信息
	async function getUserInfo() {
		// const getOpenId = await request("getOpenId");
		// if (getOpenId.status) {
		// 	let submitData = {
		// 		phone: uni.getStorageSync('phone'),
		// 		openid: getOpenId.result,
		// 		type: 0,
		// 	};
		// 	const data = await request("loginUser", submitData);
		// 	if (data.status && data.result[0]) {
		// 		const userInfo = data.result[0];
		// 		// 分别设置不可修改和可修改的信息
		// 		state.userInfo.person_name = userInfo.person_name;
		// 		state.userInfo.sex = userInfo.sex;

		// 		state.formData.birthday = userInfo.birthday || '';
		// 		state.formData.identification = userInfo.identification || '';
		// 		state.formData.politics = userInfo.politics || '';
		// 		state.formData.phone = userInfo.phone || '';
		// 	} else {
		// 		uni.showToast({
		// 			title: "获取信息失败",
		// 			icon: "error",
		// 		});
		// 	}
		// }
		let submitData = {
			// _id:uni.getStorageSync("userid")
			condition: {
				_id: uni.getStorageSync("userid")
			}
		}
		const data = await request("selectUser", submitData);
		console.log('selectUser', data)
		if (data.status && data.result[0]) {
			const userInfo = data.result[0];
			console.log('userInfo', userInfo)
			// 分别设置不可修改和可修改的信息
			state.userInfo.person_name = userInfo.person_name;
			state.userInfo.sex = userInfo.sex;
			state.userInfo.id = userInfo._id

			state.formData.birthday = userInfo.birthday || '';
			state.formData.identification = userInfo.identification || '';
			state.formData.politics = userInfo.politics || '';
			state.formData.phone = userInfo.phone || '';
		} else {
			uni.showToast({
				title: "获取信息失败",
				icon: "error",
			});
		}
	}

	// 表单验证方法
	const validateForm = () => {
		// 验证出生日期
		if (!state.formData.birthday) {
			uni.showToast({
				title: '请选择出生日期',
				icon: 'none'
			});
			return false;
		}

		// 验证身份证号（18位，最后一位可以是X）
		if (!/^\d{17}[\dXx]$/.test(state.formData.identification)) {
			uni.showToast({
				title: '请输入正确的身份证号码',
				icon: 'none'
			});
			return false;
		}

		// 验证政治面貌
		if (!state.formData.politics) {
			uni.showToast({
				title: '请选择政治面貌',
				icon: 'none'
			});
			return false;
		}

		// 验证手机号（11位）
		if (!/^1[3-9]\d{9}$/.test(state.formData.phone)) {
			uni.showToast({
				title: '请输入正确的手机号码',
				icon: 'none'
			});
			return false;
		}

		return true;
	};

	// 修改提交方法
	const submitForm = async () => {
		if (!validateForm()) {
			return;
		}

		try {
			const submitData = {
				updateId: state.userInfo.id,
				updateData: state.formData
			};
			const data = await request("updateUser", submitData);
			
			if (data.status) {
				uni.showToast({
					title: '修改成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} else {
				uni.showToast({
					title: data.message || '修改失败',
					icon: 'error'
				});
			}
		} catch (error) {
			uni.showToast({
				title: '修改失败',
				icon: 'error'
			});
		}
	};

	// 页面加载时获取数据
	onMounted(() => {
		getUserInfo()
	});
</script>

<style lang="scss">
	.detail-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;

		.content-box {
			background: #fff;
			border-radius: 12rpx;
			padding: 30rpx 20rpx;
		}

		.avatar-section {
			.avatar-wrapper {
				position: relative;
				width: 120rpx;
				height: 120rpx;
				margin: 20rpx auto 40rpx;
				background: #f5f5f5;
				border-radius: 50%;

				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.camera-icon {
					position: absolute;
					right: -10rpx;
					bottom: 0;
					width: 40rpx;
					height: 40rpx;
					background: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}

		.form-section {
			padding: 0;

			.form-item {
				display: flex;
				align-items: center;
				min-height: 100rpx;
				border-bottom: 1rpx solid #eee;

				&:last-child {
					border-bottom: none;
				}

				.required {
					color: #ff4d4f;
					margin-right: 4rpx;
					font-size: 28rpx;
				}

				.label {
					width: 140rpx;
					color: #333;
					font-size: 28rpx;
				}

				input {
					flex: 1;
					font-size: 28rpx;
				}

				.placeholder {
					color: #999;
					font-size: 28rpx;
				}

				&.arrow {
					.input-wrapper {
						flex: 1;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.input-text {
							font-size: 28rpx;
							color: #333;
						}

						.placeholder {
							color: #999;
							font-size: 28rpx;
						}

						.arrow-icon {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.readonly {
					flex: 1;
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.submit-btn {
			margin-top: 40rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			background: #ff4d4f;
			color: #fff;
			font-size: 32rpx;
			border-radius: 44rpx;
		}
	}
</style>
